<template>
    <div id="songdetail">
        <el-header>首页</el-header>
        {{this.$route.params.id}}
        <p>{{this.$route.params.id}}</p>
        <div class="warp">
            {{word.lyric}}
        </div>
        <div><span>{{songdetail.name}}</span>
        <i><img class="songdetailimg" :src="picUrl" alt=""></i>
         <audio controls :src="songUrl"></audio></div>
    </div>
</template>


<script>
import axios from 'axios'
  export default {
    name:"songlistdetail",
    data(){
        return{
            word:'',
           songUrl:'',
           songdetail:{},
           picUrl:''
        }
    },
    methods:{
        getword(){
            axios({
                method:'get',
                url:'http://localhost:5000/lyric?id='+this.$route.params.id
            }).then((res)=>{
              this.word=res.data.lrc;
            }).catch((err)=>{
                console.log(err)
            })
         
        },
        getsongurl(){
            axios({
                method:'get',
                url:'http://localhost:5000/song/url?id='+this.$route.params.id
            }).then((res)=>{
                this.songUrl=res.data.data[0].url;
                console.log(res.data.data[0].url)
            }).catch((err)=>{
                console.log(err)
            })
        },
        getsongdetail(){
            axios({
                method:'get',
                url:'http://localhost:5000/song/detail?ids='+this.$route.params.id
            }).then((res)=>{
                this.songdetail=res.data.songs[0];
                this.picUrl= res.data.songs[0].al.picUrl;
                // console.log(res.data.songs[0].al.picUrl)
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    mounted(){
         this.getword();
         this.getsongurl();
         this.getsongdetail()
    }
  }
</script>
<style lang="scss" scoped>
.songdetailimg{
    width:40px;
    height:30px;
}
</style>